<template>
  <view class="form-textarea" id="my - form - textarea">
    <view class="textarea-input">
      <textarea v-if="showInput || !replace" class="textarea" id="textarea" :class="{ clear: showClear }"
        :value="defaultValue" :adjust-position="false" :show-confirm-bar="false" :focus="inputFocus"
        :maxlength="maxlength" :auto-height="autoHeight" :confirm-type="confirmType" :ignoreCompositionEvent="false"
        :hold-keyboard="holdKeyboard" @compositionstart="handleCompositionstart" @focus="handleFocus"
        @input="handleInput" @blur="handleBlur" @linechange="handleLinechange" />
      <view class="textarea" v-else v-html="formatHtml(defaultValue)" @click="handleShow"></view>
      <view :class="['placeholder', { clear: showClear }, { ios: isIOS }]" v-if="showPlaceholder" v-html="placeholder"
        @click="handleShow"></view>
      <view class="clear-icon" v-if="showClear && clearDisabled" @click="handleClear">
        <u-icon name="close-circle-fill" color="#c0c4cc"></u-icon>
      </view>
    </view>
    <view class="textarea-limit" v-if="showWordLimit && maxlength !== -1"><span
        :style="{ color: lengthColor }">{{ defaultValue.length }}</span> /
      {{ maxlength }} 字</view>
  </view>
</template>

<script>
import { formatHtml } from "@/utils/handle";
import removeBr from "@/utils/removeBr";
export default {
  props: {
    value: {
      type: String,
      default: "",
    },
    placeholder: String,
    maxlength: { type: Number, default: -1 },
    autoHeight: { type: Boolean, default: false },
    confirmType: { type: String, default: "done" },
    showWordLimit: { type: Boolean, default: false },
    replace: { type: Boolean, default: true },
    focus: { type: Boolean, default: false },
    holdKeyboard: { type: Boolean, default: false },
    lengthColor: String,
    clearDisabled: { type: Boolean, default: true },
  },
  data() {
    return {
      formatHtml,
      showClear: false,
      showInput: false,
      showPlaceholder: true,
      inputFocus: this.focus,
      defaultValue: this.value,
      isIOS: uni.getSystemInfoSync().platform == "ios",
      textareaActiveHeight: "",
    };
  },
  watch: {
    value: {
      handler(val) {
        this.showPlaceholder = !val;
        this.defaultValue = this.handleBr(val);
        console.log("进入侦听器");
        // this.textareaActiveHeight =
        //   this.getCharCount(val, "<br />") * 200 + "rpx";
        // console.log("this.textareaActiveHeight", this.textareaActiveHeight);
        const querySecond = uni.createSelectorQuery().in(this);
        querySecond.selectAll(".textarea").boundingClientRect();
        querySecond.exec((res) => {
          console.log("res", res[0][0].height);
          res[0][0].height = 100;
        });
      },
      immediate: true,
    },
    focus: {
      handler(val) {
        this.inputFocus = val;
      },
      immediate: true,
    },
  },
  methods: {
    // scrollToBottom() {
    //   const textarea = this.$refs.myTextArea; // 获取Textarea组件的引用
    //   console.log("textarea", textarea);
    //   if (textarea) {
    //     setTimeout(() => {
    //       textarea.focus(); // 确保Textarea被选中
    //       // 计算Textarea高度与内容高度之间的差值
    //       let diffHeight = textarea.clientHeight - textarea.scrollHeight;
    //       // 根据差值设置scrollTop属性，使得Textarea底部内容完全展示
    //       textarea.scrollTop += diffHeight;
    //     }, 10); // 等待一小段时间再执行，确保Textarea已经渲染完成
    //   }
    // },
    getCharCount(str, char) {
      var regex = new RegExp(char, "g"); // 使用g表示整个字符串都要匹配
      var result = str.match(regex); //match方法可在字符串内检索指定的值，或找到一个或多个正则表达式的匹配。
      var count = !result ? 0 : result.length;
      return count;
    },
    handleBr(str, tStr = "") {
      // console.log("str", str);
      if (tStr == "") {
        // console.log("removeBr(str)", removeBr(str));
        return removeBr(str);
        // return "芙蓉水面采，船行影犹在.你无暇的爱";
      } else {
        return removeBr(str, tStr);
      }
    },
    handleShow() {
      this.inputFocus = false;
      this.showInput = true;
      this.$nextTick(() => {
        this.inputFocus = true;
      });
      // this.scrollToBottom();
    },
    handleClear() {
      // this.inputFocus = false; // 添加这个无法修改textarea值
      this.defaultValue = "";
      this.$emit("update:value", this.defaultValue);
      this.$emit("line-change", { lineCount: 0 });

      this.$nextTick(() => {
        this.inputFocus = true;
      });
    },
    handleFocus(e) {
      console.log("e", e);
      this.showInput = true;
      this.showClear = true;
      this.showPlaceholder = false;
      this.$emit("board-change", e.detail.height || 0);
      this.$emit("update:focus", true);
    },
    handleInput(e) {
      this.showPlaceholder = !this.defaultValue;
      this.$emit("update:value", e.detail.value);
    },
    handleBlur() {
      this.showInput = false;
      this.showPlaceholder = !this.defaultValue;
      this.$emit("board-change", 0);
      this.$emit("update:focus", false);
      setTimeout(() => {
        this.showClear = false;
      }, 0);
    },
    handleCompositionstart() {
      this.showPlaceholder = false;
    },
    handleLinechange(event) {
      this.$emit("line-change", event.detail);
    },
  },
};
</script>

<style lang="scss">
.form-textarea {
  width: 100%;
  .textarea-input {
    // flex-grow: 1;
    // flex-shrink: 1;
    display: flex;
    align-items: center;
    position: relative;
    // overflow: auto;
    word-break: break-all;
    textarea,
    .textarea {
      flex: 1;
      padding: 24rpx 32rpx;
      line-height: $uni-font-size-sec;
      font-size: $uni-font-size-base;
      box-sizing: border-box;
      // overflow: hidden;
      // height: 100%;
      // height: v-bind("textareaActiveHeight") !important;
      height: 60vh !important;
      // overflow: scroll;
      word-break: break-all;
      line-height: 44rpx;
      &.textarea {
        display: flex;
        flex-direction: column;
        height: 100%;
        line-height: 44rpx;
        rich-text {
          height: 100%;
          // overflow: hidden;
          // overflow: scroll;
        }
      }
      &.clear {
        padding: 24rpx 0 24rpx 32rpx;
      }
    }
    .placeholder {
      position: absolute;
      left: 0;
      top: 0;
      padding: 24rpx 32rpx;
      width: 100%;
      line-height: $uni-font-size-sec;
      font-size: $uni-font-size-base;
      &.clear {
        padding: 24rpx 76rpx 24rpx 32rpx;
      }
      &.ios {
        padding-left: 44rpx;
      }
    }
    .clear-icon {
      display: flex;
      align-items: center;
      padding: 0 24rpx;
      height: 100%;
    }
  }
  .textarea-limit {
    margin: 12rpx 0 20rpx;
    font-size: $uni-font-size-sm;
    color: $uni-text-color-888;
    line-height: $uni-font-size-lg;
    text-align: right;
  }
}
</style>
